<template>
  <button @click="flag = !flag">动画</button>
  <transition enter-active-class="animate__animated animate__zoomIn"
              leave-active-class="animate__animated animate__zoomOut">
    <div class="box" v-if="flag"></div>
  </transition>
</template>

<script setup lang='ts'>

const flag = ref(true)

</script>

<style lang='scss' scoped>
.box {
  height: 200px;
  width: 200px;
  margin: 200px;
  background-color: red;
}
</style>